Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

prismjs

Package Overview
Dependencies
Maintainers
8
Versions
37
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

prismjs

Lightweight, robust, elegant syntax highlighting. A spin-off project from Dabblet.

  • 1.29.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
7.6M
increased by7.78%
Maintainers
8
Weekly downloads
 
Created

What is prismjs?

PrismJS is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It's used to make code snippets in web pages prettier and more readable. It supports a wide range of programming languages and comes with a variety of themes.

What are prismjs's main functionalities?

Syntax Highlighting

This feature allows you to highlight syntax of various programming languages. The code sample demonstrates how to highlight JavaScript code using PrismJS.

Prism.highlight(code, Prism.languages.javascript, 'javascript');

Extensible Language Definitions

PrismJS allows you to extend existing language definitions to add new patterns or modify existing ones. The code sample shows how to add a new pattern to the JavaScript language definition.

Prism.languages.insertBefore('javascript', 'function-variable', {
  'function-variable': {
    pattern: /\bvar\s+[a-z0-9_]+\s*=\s*function\b/,
    alias: 'function'
  }
});

Custom Hooks

You can add custom hooks to modify code or the environment before or after the highlighting process. The code sample demonstrates a hook that replaces occurrences of 'foo' with 'bar' before highlighting.

Prism.hooks.add('before-highlight', function(env) {
  env.code = env.element.textContent.replace(/\bfoo\b/g, 'bar');
});

Themes

PrismJS comes with a variety of themes that can be easily included in your web page to change the appearance of highlighted code. The code sample shows how to include a PrismJS theme in an HTML document.

<link href="themes/prism.css" rel="stylesheet" />

Plugins

PrismJS supports plugins that add additional functionality, such as displaying line numbers. The code sample demonstrates how to include the line numbers plugin.

<script src="plugins/line-numbers/prism-line-numbers.js"></script>

Other packages similar to prismjs

Keywords

FAQs

Package last updated on 23 Aug 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc